
Summit.UI.Widget.Basic_Panel = function(title)
{
	var self = this;

	this.perRow=10;
	this.buttonCount=0;
	this.title=title;
	this.buttons = new Array();
	this.width = '1024';

	this.addButton = function(settings)
	{
		var button = {
			text: null,
			link: null,
			icon: null,
			onclick: function(){},
			tdId:false
		}

		for(i in settings)
		button[i]=settings[i];

		self.buttonCount++;
		self.buttons.push(button);
	}

	this.addVR = function()
	{
		var button = {
			vr:true
		}

		self.buttons.push(button);
	}

	this.output = function()
	{
		var panelTable = new Element('table', {
			cellspacing: 1,
			cellpadding: 0,
			marginTop: 8,
			'class': 'forumline basicPanel',
			styles: {
				width: self.width
			}
		});

		var panelBody = new Element('tbody');
		var panelHeaderTr = new Element('tr');
		var panelHeaderTh = new Element('th', {
			'class':'header',
			colspan:self.perRow,
			styles : {
				textAlign:'left'
			}
		});

		var panelBodyTr = new Element('tr');
		var panelBodyTd = new Element('td', {
			colspan:self.perRow
		});


		var panelBodyTable = new Element('table',{
			width: self.width,
			cellspacing: 0,
			cellpadding: 0,
			border: 0,
			styles : {
				backgroundColor: '#202020',
				margin: 0
			}
		});

		var panelBodyTableBody = new Element('tbody');
		var panelBodyTableBodyTr = new Element('tr', {
			'class':'row2'
		});


		if(typeof self.title == 'string' || typeof self.title == 'number')
		panelHeaderTh.setHTML(self.title);
		else
		panelHeaderTh.adopt(self.title);


		var count = 0;
		for(i=0;i<self.buttons.length;i++)
		{
			if(count==self.perRow)
			{
				panelBodyTableBody.adopt(panelBodyTableBodyTr);

				var panelBodyTableBodyTr = new Element('tr', {
					'class':'row2'
				});

				count = 0;
			}

			var button = self.buttons[i];

			if(button.vr)
			{
				var buttonTd = new Element('td', {
					styles: {
						width: '25px',
						backgroundColor: 'rgb(39, 39, 39)'
					},
					align:'center',
					valign:'bottom'
				});

				buttonTd.setHTML('&nbsp');

			}

			else
			{
				var buttonTd = new Element('td', {
					width:Math.floor(100/self.buttonCount)+'%',
					align:'center',
					id:button.tdId,
					events: {
						click : button.onclick ? button.onclick : function(){}
					},
					valign:'bottom'
				});

				var buttonA = new Element('a', {
					href : button.link ? button.link : 'javascript:void(0)',
					styles: {
						cursor: 'pointer'
					}
				});
							

				var buttonDiv = new Element('div', {
					'class': 'button'
				});

				var buttonImg = new Element('img', {
					height: 70,
					border: 0,
					align: 'middle',
					src: button.icon
				});


				buttonTd.fx = new Fx.Styles(buttonTd, {
					duration: 250,
					wait: false,
					transition: Fx.Transitions.Quad.easeOut
				});


				buttonTd.addEvent("mouseenter", function(event) {
					if(!this.colorLock)
					this.fx.start({
					'background-color': ['#303030','#696969']
					})
				});

				buttonTd.addEvent("mouseleave", function(event) {
					if(!this.colorLock)
					this.fx.start({
						'background-color': ['#696969','#303030']
					})
				});


				var buttonP = new Element('p');
				buttonP.appendText(button.text);


				buttonDiv.adopt([buttonImg,buttonP]);
				buttonA.adopt(buttonDiv);
				buttonTd.adopt(buttonA);
			}

			panelBodyTableBodyTr.adopt(buttonTd);
			count++;
		}

		panelTable.adopt(panelBody);
		panelBody.adopt([panelHeaderTr,panelBodyTr]);
		panelHeaderTr.adopt(panelHeaderTh);
		panelBodyTr.adopt(panelBodyTd);
		panelBodyTd.adopt(panelBodyTable);
		panelBodyTable.adopt(panelBodyTableBody);
		panelBodyTableBody.adopt(panelBodyTableBodyTr);

		return panelTable;
	}
}